<template>
  <div ref="chart" style="width: 100%;height: 238px;">

  </div>
</template>
<script>

export default {
  name: 'ChartOne',
  props: {

    barData: {
      title: '产品',
      data: [],
      date: []
    }

  },
  data () {
    return {
      myChart: null
    }
  },

  mounted () {

  },
  watch: {
    barData: {
      handler (val) {
        // 判断传入的option是否有内容
        if (Object.keys(val).length) {
          this.$nextTick(() => {
            this.initChart();
          })
        }
      },
      immediate: true,
      deep: true
    }
  },

  methods: {
    initChart () {
      // 如果已有实例，则先清理
      if (this.myChart) {
        this.myChart.dispose();
      }
      this.myChart = this.$echarts.init(this.$refs.chart);
      const option = {
        title: {

          text: this.barData.title,
          x: 'center',
          y: '10px',
          textStyle: {
            // 文字颜色
            color: '#FFF'
            // 字体大小
            // fontSize: 15,
            // 字体粗细:'normal,'bold,'bolder','lighter','100|200|300|400...'
            // fontWeight: 'bold',
            // 字体系列
            // fontFamily: 'sans-serif',
            // 字体风格 'normal','italic','oblique'
            // fontStyle: 'normal'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '20%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.barData.date,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: this.barData.data
          }
        ]
      }
      this.myChart.setOption(option);
      // 当窗口大小改变 echarts重置大小
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    }

  }
  // beforeDestroy () {
  //   if (this.myChart) {
  //     this.myChart.dispose();
  //   }
  // }
}

</script>

<style scoped>

</style>
